<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="format-detection" content="telephone=no">
	<title>Draw SVG</title>
	<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
    
<style>
	.phone-solid {
		width:100%;
		text-align: center;
		position: absolute;
		top:20px;
		left:0;
		display: none;
		height:100%;
	}
	.phone-solid .phone {
		width:220px;
	}
</style>
</head>

<body>
<div id="section_container">
<section data-role="section" class="active" id="page_shape">
	<header>
	    <div class="titlebar">
            <a data-toggle="back" href="#">
                <i class="icon icon-arrowleft"></i>
            </a>
            <h1>画SVG</h1>
        </div>
	</header>
	<article id="main_article" data-role="article" class="active" style="width:100%; background:#50A6FC; text-align:center;">
		<svg version="1.1" id="phoneOutline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="500px" viewBox="250 100 500 800" enable-background="new 250 100 500 800" xml:space="preserve">
			<path fill="none" stroke="#ffffff" stroke-width="3" stroke-miterlimit="10" d="M627.75,882.65h-250.6c-30.2,0-54.7-24.5-54.7-54.7
				v-440.1h-1.8c-1.2,0-2.2-1-2.2-2.2v-21.9c0-1.2,1-2.2,2.2-2.2h1.8v-37.2h-1.8c-1.2,0-2.2-1-2.2-2.2v-21.9c0-1.2,1-2.2,2.2-2.2h1.8
				v-37.2h-1.8c-1.2,0-2.2-1-2.2-2.2v-30.6c0-1.2,1-2.2,2.2-2.2h1.8v-49.8c0-30.2,24.5-54.7,54.7-54.7h186.8v-1.8c0-1.2,1-2.2,2.2-2.2
				h54.7c1.2,0,2.2,1,2.2,2.2v1.8h4.8c30.2,0,54.7,24.5,54.7,54.7v651.9C682.45,858.15,657.95,882.65,627.75,882.65z"/>
			<path fill="none" stroke="#ffffff" stroke-width="3" stroke-miterlimit="10" d="M674.65,175.65c0-25.6-20.8-46.4-46.4-46.4h-251.6
				c-25.6,0-46.4,20.8-46.4,46.4v652.8c0,25.6,20.8,46.4,46.4,46.4h251.6c25.6,0,46.4-20.8,46.4-46.4V175.65L674.65,175.65z"/>
			<path fill="none" stroke="#ffffff" stroke-width="3" stroke-miterlimit="10" d="M656.65,778.95h-308.4c-1.9,0-3.5-1.6-3.5-3.5v-546
				c0-1.9,1.6-3.5,3.5-3.5h308.4c1.9,0,3.5,1.6,3.5,3.5v546C660.15,777.35,658.55,778.95,656.65,778.95z"/>
			<path fill="none" stroke="#ffffff" stroke-width="3" stroke-miterlimit="10" d="M528.65,190.95h-52.5c-2.1,0-3.7-1.7-3.7-3.7
				c0-2.1,1.7-3.7,3.7-3.7h52.5c2.1,0,3.7,1.7,3.7,3.7C532.45,189.25,530.75,190.95,528.65,190.95z"/>
			<path fill="none" stroke="#ffffff" stroke-width="3" stroke-miterlimit="10" d="M502.45,165.15c-3.7,0-6.8-3-6.8-6.8
				c0-3.7,3-6.8,6.8-6.8c3.7,0,6.8,3,6.8,6.8C509.25,162.15,506.15,165.15,502.45,165.15z"/>
			<path fill="none" stroke="#ffffff" stroke-width="3" stroke-miterlimit="10" d="M502.45,795.55c18,0,32.6,14.6,32.6,32.6
				s-14.6,32.6-32.6,32.6c-18,0-32.6-14.6-32.6-32.6S484.45,795.55,502.45,795.55z"/>
			<path fill="none" id="phone-line1" stroke="#50A6FC" stroke-width="5" stroke-miterlimit="10" d="M627.75,882.65h-250.6c-30.2,0-54.7-24.5-54.7-54.7
				v-440.1h-1.8c-1.2,0-2.2-1-2.2-2.2v-21.9c0-1.2,1-2.2,2.2-2.2h1.8v-37.2h-1.8c-1.2,0-2.2-1-2.2-2.2v-21.9c0-1.2,1-2.2,2.2-2.2h1.8
				v-37.2h-1.8c-1.2,0-2.2-1-2.2-2.2v-30.6c0-1.2,1-2.2,2.2-2.2h1.8v-49.8c0-30.2,24.5-54.7,54.7-54.7h186.8v-1.8c0-1.2,1-2.2,2.2-2.2
				h54.7c1.2,0,2.2,1,2.2,2.2v1.8h4.8c30.2,0,54.7,24.5,54.7,54.7v651.9C682.45,858.15,657.95,882.65,627.75,882.65z"/>
			<path fill="none" id="phone-line2" stroke="#50A6FC" stroke-width="5" stroke-miterlimit="10" d="M674.65,175.65c0-25.6-20.8-46.4-46.4-46.4h-251.6
				c-25.6,0-46.4,20.8-46.4,46.4v652.8c0,25.6,20.8,46.4,46.4,46.4h251.6c25.6,0,46.4-20.8,46.4-46.4V175.65L674.65,175.65z"/>
			<path fill="none" id="phone-line3" stroke="#50A6FC" stroke-width="5" stroke-miterlimit="10" d="M656.65,778.95h-308.4c-1.9,0-3.5-1.6-3.5-3.5v-546
				c0-1.9,1.6-3.5,3.5-3.5h308.4c1.9,0,3.5,1.6,3.5,3.5v546C660.15,777.35,658.55,778.95,656.65,778.95z"/>
			<path fill="none" id="phone-line4" stroke="#50A6FC" stroke-width="5" stroke-miterlimit="10" d="M528.65,190.95h-52.5c-2.1,0-3.7-1.7-3.7-3.7
				c0-2.1,1.7-3.7,3.7-3.7h52.5c2.1,0,3.7,1.7,3.7,3.7C532.45,189.25,530.75,190.95,528.65,190.95z"/>
			<path fill="none" id="phone-line5" stroke="#50A6FC" stroke-width="5" stroke-miterlimit="10" d="M502.45,165.15c-3.7,0-6.8-3-6.8-6.8
				c0-3.7,3-6.8,6.8-6.8c3.7,0,6.8,3,6.8,6.8C509.25,162.15,506.15,165.15,502.45,165.15z"/>
			<path fill="none" id="phone-line6" stroke="#50A6FC" stroke-width="5" stroke-miterlimit="10" d="M502.45,795.55c18,0,32.6,14.6,32.6,32.6
				s-14.6,32.6-32.6,32.6c-18,0-32.6-14.6-32.6-32.6S484.45,795.55,502.45,795.55z"/>
		</svg>
		<!-- <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 	width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
			<g>
				<path fill="none" stroke="#231F20" stroke-width="11.6787" stroke-miterlimit="10" d="M550.6,157.7c-48.9,4.1-35.4,29.7-35.4,29.7
					c31.1,62.8,80.3,108.2,152,112.8C667.2,300.2,685.5,152,550.6,157.7z"/>
				<path fill="none" stroke="#231F20" stroke-width="11.6787" stroke-miterlimit="10" d="M686.4,575.5c0.4-42-15.6-81.6-45-111.6
					c-27.2-27.7-64-44.2-104.1-46.4l-12.6-0.2l-148.3,1l-3.7,147.4l-0.1,14c0.2,5.6,0.7,11.1,1.5,16.6c2.4,17,7.3,33.2,14.8,48.3
					c7.2,14.6,16.7,27.9,28.2,39.6c29.4,30,68.7,46.7,110.7,47.1c42,0.4,81.7-15.6,111.6-45C669.3,656.8,686,617.5,686.4,575.5z"/>
				<path fill="none" stroke="#231F20" stroke-width="11.6787" stroke-miterlimit="10" d="M629.9,335.2
					c-246.7-19.6-190.1-319.1,49-289.1c-118.7-16.9-195.4,16.4-234.7,68.1c-10.8-10.4-31.3-19.6-69.2-22.8
					C83.8,79.1,123.3,399.3,123.3,399.3c128.2-8.2,223-76.8,290-177.2c5.8,73.8,60.5,146.1,156.7,163.7c93,17,122.8,97.2,131.5,152.9
					c2.9,13.1,4.8,26.4,4.6,40.1c-0.5,47.1-19.2,91.2-52.8,124.1c-22,21.6-49,36.1-78.1,43.9C823.1,738.5,823.5,350.6,629.9,335.2z"/>
			</g>
			<path fill="none" stroke="#231F20" stroke-width="7.7858" stroke-miterlimit="10" d="M261.7,821.9c0,0-22.7,0-45.6,0
				c-25.8,0-32.1,33.1-3.9,40.4c0,0,23.4,5.9,31.1,8.1c32,6.8,27.7,46.4-3.9,46.4c-35.5,0-49.1,0-49.1,0"/>
			<path fill="none" stroke="#231F20" stroke-width="7.7099" stroke-miterlimit="10" d="M376.6,870.8c-1.2,26.2-22.8,47.2-49.3,47.2
				c-27.3,0-49.4-22.1-49.4-49.4c0-27.3,22.1-49.4,49.4-49.4c16.3,0,30.7,7.9,39.7,20l-79.6,56.2"/>
			<path fill="none" stroke="#231F20" stroke-width="7.7099" stroke-miterlimit="10" d="M485.4,870.8c-1.2,26.2-22.8,47.2-49.3,47.2
				c-27.3,0-49.4-22.1-49.4-49.4c0-27.3,22.1-49.4,49.4-49.4c16.3,0,30.7,7.9,39.7,20l-79.6,56.2"/>
			<path fill="none" stroke="#231F20" stroke-width="7.7099" stroke-miterlimit="10" d="M585.5,769.6c0,0,0,79,0,103.8
				c0,24.8-20,45-45,45c-32.4,0-45.1-28.6-45.1-49.8c0-21.2,10.7-49.4,44.1-49.4c21.6-0.3,32.2,15.3,32.2,15.3"/>
			<path fill="none" stroke="#231F20" stroke-width="7.7858" stroke-miterlimit="10" d="M671,821.9c0,0-22.7,0-45.6,0
				c-25.8,0-32.1,33.1-3.9,40.4c0,0,23.4,5.9,31.1,8.1c32,6.8,27.7,46.4-3.9,46.4c-35.5,0-49.1,0-49.1,0"/>
			<path fill="none" stroke="#231F20" stroke-width="27.2503" stroke-miterlimit="10" d="M779.2,816.5c0,0,0,39.8,0,65.1
				s-22.5,28.5-28.5,28.5c-6,0-28.5-3.2-28.5-28.5s0-65.1,0-65.1"/>
			<line fill="none" stroke="#231F20" stroke-width="27.2503" stroke-miterlimit="10" x1="819.1" y1="816.5" x2="819.1" y2="921.6"/>
			<line fill="none" stroke="#231F20" stroke-width="29.1968" stroke-linecap="round" stroke-miterlimit="10" x1="819.1" y1="785.1" x2="819.1" y2="785.8"/>
		</svg>
 -->
		<div class="phone-solid">
			<img src="http://robort007.github.io/SeedsUI/preview/img/components/iphone5.png" class="phone">
		</div>
	</article>
</section>
</div>
<!--- third -->
	<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
	<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
	<!---  agile -->
	<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
	<!-- app -->
	<script type="text/javascript" src="../assets/app/js/app.seedsui.js"></script>



<script>
	
	function drawPhone(){
		var path1 = document.getElementById("phone-line1"),
		path2 = document.getElementById("phone-line2"),
		path3 = document.getElementById("phone-line3"),
		path4 = document.getElementById("phone-line4"),
		path5 = document.getElementById("phone-line5"),
		path6 = document.getElementById("phone-line6"),
	    segment1 = new Segment(path1),
	    segment2 = new Segment(path2),
	    segment3 = new Segment(path3),
	    segment4 = new Segment(path4),
	    segment5 = new Segment(path5),
	    segment6 = new Segment(path6);
	    	
		segment1.draw("0%", "0%", 2);
		segment2.draw("0%", "0%", 2);
		segment3.draw("0%", "0%", 2);
		segment4.draw("0%", "0%", 1, {delay:1});
		segment5.draw("0%", "0%", 1, {delay:1});
		segment6.draw("0%", "0%", 1, {delay:1, callback: showPhone});
	}

	function showPhone(){
		var zoomIn = function(){
			$(".phone").css({
				WebkitTransition:"all 5s",
				WebkitTransform:"scale(50)"
			});
		}
		$(".phone-solid").fadeIn(1000,zoomIn);
		$("#phoneOutline").fadeOut();
	}

	
	window.addEventListener("load",function(){
		drawPhone();
	})
</script>
</body>
</html>
